<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>Cascade Framework</title>
        <meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
        <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            .aside {
                min-width:130px;
            }

            .content {
                margin:6px 0;
            }

            .site-body .site-body {
                margin:0;
            }

            .site-body .site-footer {
                border-top-width: 1px;
            }

            .layout-demo .cell {
                background-image: url('assets/img/alpha-10.png');
                padding:2px 4px;
                border-radius:6px;
            }
        </style>
    </head>
    <body class="narrow">
        <div class="site-center">
            <div class="site-body">
                <div class="site-header">
                    <div class="tags sitemenutags">
                        <div class="cell">
                            <ul class="nav blocks">
                                <li class=""><a href="https://github.com/jslegers/cascadeframework/archive/master.zip" class="">Download v1.5</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col width-fill sitemenu">
                        <div class="col width-fit mobile-width-fit">
                            <div class="cell">
                                <a href="index.html" class="logo"></a>
                            </div>
                        </div>
                        <div class="col width-fill mobile-width-fill">
                            <div class="cell">
                                <ul class="nav">
                                    <li class="active"><a href="grid.html">Grid</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icons.html">Icons</a></li>
                                    <li><a href="components.html">Components</a></li>
                                    <li><a href="templates.html">Templates</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="sitemenu-responsive col collapsible collapsed">
                        <div class="col collapse-trigger">
                            <div class="cell">
                                <ul class="nav ">
                                    <li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col">
                            <div class="left collapse-section">
                                <div class="cell">
                                    <ul class="nav">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="grid.html">Grid</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="components.html">Components</a></li>
                                        <li><a href="templates.html">Templates</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="cell">
                        <div class="col">
                            <div class="cell">
                                <div class="page-header">
                                    <h1>Grid <small>documentation</small></h1>
                                </div>
                            </div>
                        </div>
                        <div class="col width-1of4">
                            <div class="cell menu">
                                <span class="tiny">Grid types</span>
                                <ul class="left nav links">
                                    <li><a href="grid.html">Semantic grid</a></li>
                                    <li class="active"><a href="grid-presentational.html">Presentational grid</a></li>
                                    <li><a href="grid-mediaobject.html">Media object</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col width-fill">











                            <div class="col">
                                <div class="cell">
                                    <h2>Presentational classes</h2>
                                    <p>
                                        While presentational classes do tend to result in having more classes in your markup that have no semantic purpose and therewith often leads to
                                        uglier HTML markup, the trade-off is that it allows you to write much less custom CSS to achieve the same effect.
                                    </p>
                                    <p>
                                        This is because presentational classes increase the reusability of your CSS rules and can act as an abstraction layer for dealing with
                                        browser quirks. UI elements that share presentational features but have no shared semantics can inherit from
                                        the same presentational classes, which themselves are optimised for crossbrowser support and modularity.
                                    </p>
                                    <p>
                                        Because this can significantly decrease the time required to build a professional crossbrowser design, Cascade Framework offers a
                                        range of presentational grid classes as an alternative to its semantic grid mechanism:
                                    </p>
                                    <ul>
                                        <li>The "col" class adds the default styling rules used for the section, article, header, footer, aside and nav elements to any block level
                                            element, usually a div element. This is especially useful when you want support for old IE without relying on a Javascript based shiv.</li>
                                        <li>You can add a percentage based width to your section, article, header, footer, aside and nav elements or your block level element with a "col" class
                                            by adding a class that has the format "width-XofY". Y can be 2,3,4,5,6,7,8,9,10,12,16 or 24 and X can be any value between 1 and Y-1.</li>
                                        <li>The "width-fit" class can be used as a wrapper for elements that have a fixed width and automaticly takes the width of that element. It is especially
                                            useful as a wrapper for images as part of the media object pattern.</li>
                                        <li>The "width-fill" class can be used to get an element to fill any remaining space in its container element. It is especially useful to compensate for rounding
                                            errors in old IE when using the "width-XofY" class or custom percentage based widths, but also as part of the media object pattern.</li>
                                    </ul>
                                    <p>
                                        Herebelow, you see an example of how to use the presentational grid classes.
                                    </p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell layout-demo">
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-1of2">
                                                            <div class="cell">
                                                                col width-1of2
                                                                <div class="col">
                                                                    <div class="col width-2of3">
                                                                        <div class="cell">
                                                                            col width-2of3
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill">
                                                                        <div class="cell">
                                                                            col width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                                <div class="col">
                                                                    <div class="col width-1of2">
                                                                        <div class="cell">
                                                                            col width-1of2
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill">
                                                                        <div class="cell">
                                                                            col width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-1of3">
                                                            <div class="cell">
                                                                col width-1of3
                                                            </div>
                                                        </div>
                                                        <div class="col width-1of3">
                                                            <div class="cell">
                                                                col width-1of3
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-2of5">
                                                            <div class="cell">
                                                                col width-2of5
                                                            </div>
                                                        </div>
                                                        <div class="col width-2of5">
                                                            <div class="cell">
                                                                col width-2of5
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-4of5">
                                                            <div class="cell">
                                                                col width-4of5
                                                                <div class="col">
                                                                    <div class="col width-1of2">
                                                                        <div class="cell">
                                                                            col width-1of2
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill">
                                                                        <div class="cell">
                                                                            col width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-4of5">
                                                            <div class="cell">
                                                                col width-4of5
                                                                <div class="col">
                                                                    <div class="col width-4of5">
                                                                        <div class="cell">
                                                                            col width-4of5
                                                                            <div class="col">
                                                                                <div class="col width-2of3">
                                                                                    <div class="cell">
                                                                                        col width-2of3
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col width-fill">
                                                                                    <div class="cell">
                                                                                        col width-fill
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill">
                                                                        <div class="cell">
                                                                            col width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
















                            <div class="col">
                                <div class="cell">
                                    <h2>Responsive presentational classes</h2>
                                    <p>
                                        If you use Cascade Framework's responsive mechanism, all widths for section, article, header, footer, aside and nav elements and block level
                                        elements with a "col" class are reset back to 100%. This behavior can be overwritten by screen width specific classes that
                                        have the format "A-width-XofY", "A-width-fit" or "A-width-fill", where A can be "phone", "tablet" or "mobile".
                                    </p>
                                    <p>
                                        In the example below, tablet specific presentational classes have been added to adjust the layout only for the screen range
                                        commonly used in tablets. If you're using a desktop or laptop computer, you can resize your browser to test the effect.
                                    </p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell layout-demo">
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-1of2">
                                                            <div class="cell">
                                                                col width-1of2
                                                                <div class="col">
                                                                    <div class="col width-2of3 tablet-width-1of2">
                                                                        <div class="cell">
                                                                            col width-2of3<br/>
                                                                            tablet-width-1of2
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill tablet-width-fill">
                                                                        <div class="cell">
                                                                            col width-fill<br/>
                                                                            tablet-width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                                <div class="col">
                                                                    <div class="col width-1of2 tablet-width-2of3">
                                                                        <div class="cell">
                                                                            col width-1of2<br/>
                                                                            tablet-width-2of3
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill tablet-width-fill">
                                                                        <div class="cell">
                                                                            col width-fill<br/>
                                                                            tablet-width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-1of3 tablet-width-3of4">
                                                            <div class="cell">
                                                                col width-1of3<br/>
                                                                tablet-width-3of4
                                                            </div>
                                                        </div>
                                                        <div class="col width-1of3 tablet-width-fill">
                                                            <div class="cell">
                                                                col width-1of3<br/>
                                                                tablet-width-fill
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-2of5">
                                                            <div class="cell">
                                                                col width-2of5
                                                            </div>
                                                        </div>
                                                        <div class="col width-2of5">
                                                            <div class="cell">
                                                                col width-2of5
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-4of5 tablet-width-1of2">
                                                            <div class="cell">
                                                                col width-4of5<br/>
                                                                tablet-width-1of2
                                                                <div class="col">
                                                                    <div class="col width-1of2">
                                                                        <div class="cell">
                                                                            col width-1of2
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill">
                                                                        <div class="cell">
                                                                            col width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill tablet-width-fill ">
                                                            <div class="cell">
                                                                col width-fill<br/>
                                                                tablet-width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="cell">
                                                    col
                                                    <div class="col">
                                                        <div class="col width-4of5">
                                                            <div class="cell">
                                                                col width-4of5
                                                                <div class="col">
                                                                    <div class="col width-4of5 tablet-width-2of3">
                                                                        <div class="cell">
                                                                            col width-4of5<br/>
                                                                            tablet-width-2of3
                                                                            <div class="col">
                                                                                <div class="col width-2of3 tablet-width-2of5">
                                                                                    <div class="cell">
                                                                                        col width-2of3<br/>
                                                                                        tablet-width-2of5
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col width-fill tablet-width-fill">
                                                                                    <div class="cell">
                                                                                        col width-fill<br/>
                                                                                        tablet-width-fill
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col width-fill tablet-width-fill">
                                                                        <div class="cell">
                                                                            col width-fill<br/>
                                                                            tablet-width-fill
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col width-fill">
                                                            <div class="cell">
                                                                col width-fill
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>













                            <div class="col">
                                <div class="cell">
                                    <h2>Site layout</h2>
                                    <p>
                                        Herebelow, the example layout for the semantic grid has been rewritten using presentational classes only to demonstrate how
                                        both techniques can be used interchangably. 
                                    </p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <div class="col site-header">
                                                        <div class="col width-4of5 float-right">
                                                            <div class="cell">
                                                                <h2>Basic blog layout</h2>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col aside width-1of5">
                                                        <div class="cell menu">
                                                            <ul class="left links nav">
                                                                <li class="active"><a href="#">Blog</a></li>
                                                                <li><a href="#">Resources</a></li>
                                                                <li><a href="#">About</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="site-body width-fill">
                                                        <div class="border-bottom">
                                                            <div class="cell">
                                                                <h3>Cascade Framework makes webdesign easier than ever!</h3>
                                                                <div class="col content">
                                                                    Cascade Framework is a new CSS Framework that offers you everything you need to build
                                                                    professional cross-browser websites in no time. It's modular architecture further ... <a href="#">[ read more ]</a>
                                                                </div>
                                                                <div class="col">
                                                                    <i>Wednesday 13<sup>th</sup> march, 2013</i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="border-bottom">
                                                            <div class="cell">
                                                                <h3>Cascade Framework makes webdesign easier than ever!</h3>
                                                                <div class="col content">
                                                                    Cascade Framework is a new CSS Framework that offers you everything you need to build
                                                                    professional cross-browser websites in no time. It's modular architecture further ... <a href="#">[ read more ]</a>
                                                                </div>
                                                                <div class="col">
                                                                    <i>Wednesday 13<sup>th</sup> march, 2013</i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <div class="cell">
                                                                <h3>Cascade Framework makes webdesign easier than ever!</h3>
                                                                <div class="col content">
                                                                    Cascade Framework is a new CSS Framework that offers you everything you need to build
                                                                    professional cross-browser websites in no time. It's modular architecture further ... <a href="#">[ read more ]</a>
                                                                </div>
                                                                <div class="col">
                                                                    <i>Wednesday 13<sup>th</sup> march, 2013</i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="site-footer">
                                                        <div class="col width-4of5 float-right">
                                                            <div class="cell pipes">
                                                                <ul class="nav">
                                                                    <li><a href="#">Sitemap</a></li>
                                                                    <li><a href="#">About</a></li>
                                                                    <li><a href="#">Contact us</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



















                        </div>
                    </div>
                </div>
            </div>
            <div class="site-footer">
                <div class="cell">
                    <div id="sociallogos">
                        <a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
                        <a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
                        <a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
                        <div class="col">
                            &#169; 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
                        </div>
                    </div>
                    <a href="http://www.cascade-framework.com/" class="powered-by"></a>
                </div>
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>
